<!-- 顶部导航组件 -->
<!-- 使用说明：<top-bar></top-bar> -->
<template>
  <div id="topbar-wrap" :class="{ 'topCollapsed': isCollapse }">
    <el-row type="flex" justify="space-between">
        <div class="" v-if="userInfo.userInfo">
            <a class="animated fadeIn">您好，{{userInfo.userInfo.name}}</a>
        </div>
    </el-row>
  </div>
</template>
<script>
import {
  mapGetters
} from 'vuex'
export default {
  name: "topbar",
  data() {
    return {
      isFullscreen: false
    };
  },
  computed: {
    isCollapse() {
      return this.$store.state.isCollapse;
    },
    ...mapGetters({
      userInfo:'getUserInfo'
    }),
  },
  methods: {
    toggleSiderBar() {
      this.$store.commit("toggleSiderBar");
    },
    logout() {
      localStorage.clear();
      this.$bus.$emit("stopMusic");
      this.$router.push("signin");
    }
  }
};
</script>
<style scoped lang="scss">
#topbar-wrap {
  position: fixed;
  overflow: hidden;
  border-bottom: 1px solid #efefef;
  background: #fff;
  color: #353d47;
  padding: 0 15px;
  z-index: 12;
  width: 100%;
  box-sizing: border-box;
  // box-shadow: 0px 0px 20px rgba(0,0,0,0.03);
  a {
    line-height: 60px;
  }
  i {
    font-size: 20px;
    line-height: 60px;
    transition: all 0.5s;
    &:hover {
      cursor: pointer;
    }
  }
  .fa-language:hover {
    transform: rotateY(180deg);
  }
  .logout {
    text-decoration: none;
  }
}
.row-right > div {
  text-align: center;
}
</style>
